﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1600, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="shortcut icon" href="images/favicon.ico">
</head>
<body background="images/background2.jpg">
    <div class="nav clearfix">
        <a href="#"><img src="images/logo.png" width="130" height="48"></a>
        <div class="btn">
            <span id="lg">登录</span>
            <span id="back">返回首页</span>
        </div>
    </div>
    <div>
        <form action="userpage.html" class="login-form">
            <h1>用户注册</h1>
            <input type="text" name="username" id="username" placeholder="用户名" maxlength="16" />
            <input type="password" name="password" id="password" placeholder="密码" maxlength="16" />
            <input type="text" name="email" id="email" placeholder="电子邮箱" maxlength="32" />
            <p></p>
            <input type="button" id="register-submit" value="立即注册" />
            <input type="button" id="goto-login" value="已有账号" />
        </form>
    </div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    var login = document.getElementById("lg");
    login.onclick = function(){
        location.href = "/query/login";
    }
    var back = document.getElementById("back");
    back.onclick = function(){
        location.href = "/query/";
    }
    var goto_login = document.getElementById("goto-login");
    goto_login.onclick = function(){
        location.href = "/query/login";
    }
    $("#register-submit").click(function(){
        var userName = $("#username").val();
        var password = $("#password").val();
        var email = $("#email").val();
        if(!userName){
            $("form > p").text("用户名为空");
            $("form > p").show();
        }else if(!password){
            $("form > p").text("密码为空");
            $("form > p").show();
        }else if(!email){
            $("form > p").text("电子邮箱为空");
            $("form > p").show();
        }else{
            var param = {"userName":userName,"password":password,"email":email};
            $.post("/query/register",param,function(result){
                if(result=="true"){
                    window.location.href="/query/user";
                }else{
                    $("form > p").text("用户名已存在");
                    $("form > p").show();
                }
            })
        }
    })
</script>
</html>